import Taro, { useDidShow, useReachBottom, useRouter } from "@tarojs/taro";

import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import Moment from "@/components/app/Moment";
import UserItem from "@/components/app/UserItem";
import ByButton from "@/components/ui/ByButton";
import ListView from "@/components/app/ListView";

import useList from "@/hooks/useList";
import ApiBudget from "@/api/budget";
import useEnum from "@/hooks/useEnum";
import { enumMaterialApplyBillsStatus } from "@/packageProject/utils/enum";
import Money from "@/components/app/Money";
import PageHeader from "@/components/common/PageHeader";

/**
 * MaterialApplyBill
 */
export interface MaterialApplyBill {
  /**
   * 申请单ID
   */
  applyBillId: number;
  /**
   * 申请类型
   */
  applyType?: string;
  /**
   * 申请用户ID
   */
  applyUserId: number;
  /**
   * 申请用户名称
   */
  applyUserName: string;
  /**
   * 审批日期
   */
  approveDate?: number;
  /**
   * 审批意见
   */
  approveOpnoin?: string;
  /**
   * 审批用户ID
   */
  approveUserId?: number;
  /**
   * 审批用户名称
   */
  approveUserName?: string;
  /**
   * 审核总金额
   */
  auditTotalAmount: number;
  /**
   * 单据编号
   */
  billNo: string;
  /**
   * 单据类型
   */
  billType: string;
  /**
   * 预算ID，对应Bud_Budget表中的BudgetId
   */
  budgetId: number;
  /**
   * 创建日期
   */
  createDate: number;
  /**
   * 创建用户ID
   */
  createUserId: number;
  /**
   * 创建用户名称
   */
  createUserName: string;
  /**
   * 客户地址
   */
  customerAddress: string;
  /**
   * 客户名称
   */
  customerName: string;
  /**
   * 客户编号
   */
  customerNo: string;
  /**
   * 编辑日期
   */
  editDate?: number;
  /**
   * 编辑用户ID
   */
  editUserId?: number;
  /**
   * 编辑用户名称
   */
  editUserName?: string;
  /**
   * 意向客户ID
   */
  intentCustomerId: number;
  /**
   * 是否售后
   */
  isAfterSale: boolean;
  /**
   * 是否关闭
   */
  isClosed: boolean;
  /**
   * 是否拒绝
   */
  isReject: boolean;
  /**
   * 是否工人申请
   */
  isWorkerApply: boolean;
  /**
   * 材料类别
   */
  materielCategory: string;
  /**
   * 测量ID
   */
  measureId?: number;
  /**
   * 组织代码
   */
  orgCode: string;
  /**
   * 组织名称
   */
  orgName: string;
  /**
   * 拒绝日期
   */
  rejectDate?: number;
  /**
   * 拒绝原因
   */
  rejectReason?: string;
  /**
   * 拒绝用户ID
   */
  rejectUserId?: number;
  /**
   * 拒绝用户名称
   */
  rejectUserName?: string;
  /**
   * 备注
   */
  remark?: string;
  /**
   * 提醒用户IDs
   */
  remindUserIds: string;
  /**
   * 提醒用户名称
   */
  remindUserNames: string;
  /**
   * 维修单号
   */
  repairOrderBillNo?: string;
  /**
   * 维修单ID
   */
  repairOrderId?: number;
  /**
   * 拆分状态
   */
  spiltStatus: number;
  /**
   * 状态
   */
  status: number;
  /**
   * 提交日期
   */
  submitDate: number;
  /**
   * 提交用户ID
   */
  submitUserId: number;
  /**
   * 提交用户名称
   */
  submitUserName: string;
  /**
   * 工人ID
   */
  workerId?: number;
  /**
   * 工人名称
   */
  workerName?: string;
  /**
   * 工作流实例ID
   */
  workFlowInstanceId: number;
  [property: string]: any;
}

export default () => {
  const { params } = useRouter();
  const intentCustomerId = Number(params.intentCustomerId);

  const { loading, list, nextPage, resetToFirst } = useList<MaterialApplyBill>(
    ApiBudget.getMaterialApplyBills,
    {
      manual: true,
      onAfter: (res: any) => ({ list: res.data, ...res }),
    }
  );

  useReachBottom(nextPage);

  useDidShow(() => resetToFirst({ intentCustomerId }));

  const { getOption } = useEnum(enumMaterialApplyBillsStatus);
  return (
    <>
      <Page
        footerSticky
        slotHeader={
          <PageHeader className="bg-white" title="申报记录" />
        }
        slotFooter={
          <ByButton
            size="large"
            className="w-2/3"
            to={`create?intentCustomerId=${intentCustomerId}`}
          >
            新建申报单
          </ByButton>
        }
      >
        <ListView loading={loading} isEmpty={list.length === 0}>
          {list.map((item) => (
            <Card
              className="m-3"
              key={item.applyBillId || item.measureId}
              onClick={() =>
                Taro.navigateTo({
                  url: item.measureId
                    ? `detailMeasure?measureId=${item.measureId}`
                    : `detail?applyBillId=${item.applyBillId}`,
                })
              }
            >
              <ByRow content="between">
                <ByText bold size="lg">
                  {item.billNo}
                </ByText>

                <ByText type={getOption(item.status, "color")}>
                  {getOption(item.status, "label")}
                </ByText>
              </ByRow>


              <ByRow content="between" className="my-2">
                <ByText type="second" size="sm" >
                  {item.materielCategory}申请单
                </ByText>

                <ByText type="second" size="sm" >
                  承包总金额: <Money value={item.contractAmount} />
                </ByText>
              </ByRow>


              <ByRow content="between" align="center">
                <UserItem name={item.applyUserName} />
                <ByText type="third" size="sm">
                  <Moment value={item.createDate} />
                </ByText>
              </ByRow>
            </Card>
          ))}
        </ListView>
      </Page>
    </>
  );
};
